let product

function getProductId() {
    let url = location.href

    url = url.substring(url.indexOf('?') + 1)
    let arr = url.split('=')
    let id = arr[1]
    return id
}
/**
 * 2. 根据ID查询商品详情接口
 */
function loadProuctDetail() {
    let id = getProductId()
    ajax({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/find',
        data: {
            id
        },
        success: function (data) {

            let {
                resultCode,
                resultInfo
            } = data
            if (resultCode == 1) {
                product = resultInfo //商品详情对象
                onLoupe(product)


            }
        }
    })
}

//保存数据到本地
function onSum() {
    let prouductListStr = localStorage.getItem('TABLES')
    let productList = JSON.parse(prouductListStr) || []

    let oldProduct = productList.find(item => item.id == product.id)
    if (oldProduct) {
        oldProduct.num++
    } else {
        let list = {
            id: product.id,
            name: product.product,
            price: product.price,
            url: product.picture,
            sum: 1,
            singlePrice: 0,
            state: false,
        }

        productList.push(list)
    }

    //持久化存储
    localStorage.setItem('TABLES', JSON.stringify(productList))
}

function onLoupe(product) {
    let liStr = product.list.map(item => {
        return `<li><img src="${item}" alt="" class="b active small-img"></li>`
    }).join('')
    // let products = product.list.map(item => {
    //     return ` <img src="${item}" alt="" class="a">`
    // })

    let detailStr = `  <div class="wraper-l">
                                <div class="show-box">
                                    <img src="${product.picture}" alt="" class="logo a  left-img">
                                    <div class="mask"></div>
                                </div>
                                <ul class="ulEle">
                                ` + liStr + `
                                </ul>
                            </div>
                            <div class="shop">
                                <p><img src="../static/images/包邮_03.jpg" alt="">  ${product.shop} </p>
                                <div>
                                    <p>原价￥${product.oldprice}</p>
                                    <ul>
                                        <li>折扣价<span>￥${product.price}</span></li>
                                        <li class="right">76人购买</li>
                                    </ul>
                                </div>
                                <button onclick="showping()" >查看购物车</button>
                                <button onclick="shopping()">加入购物车</button>
                            </div>

                            <!-- 右边区域 -->
                            <div class="wraper-r">
                                <img src="${product.picture}" class="o right-img">
                            </div>`
    let container = document.querySelector('.container')
    container.innerHTML = detailStr
}


//放大镜
function Glass() {

    $('#glass').on('mousemove', '.a', function (e) {
        e = e || window.event

        let w = ($('.wraper-r').innerWidth()) * ($('.show-box').innerWidth()) / ($('.mask').innerWidth())
        let h = ($('.wraper-r').innerHeight()) * ($('.show-box').innerHeight()) / ($('.mask').innerHeight())

        $('.o').css({
            width: w + 'px',
            height: h + 'px'
        })

        $('.mask').css({
            display: 'block'
        })
        $('.wraper-r').css({
            display: 'block'
        })
        let x = e.offsetX - $('.mask').innerWidth() / 2
        let y = e.offsetY - $('.mask').innerHeight() / 2
        if (x < 0) {
            x = 0
        }
        if (x > $('.show-box').innerWidth() - $('.mask').innerWidth()) {
            x = $('.show-box').innerWidth() - $('.mask').innerWidth()
        }
        if (y < 0) {
            y = 0
        }
        if (y > $('.show-box').innerHeight() - $('.mask').innerHeight()) {
            y = $('.show-box').innerHeight() - $('.mask').innerHeight()
        }

        $('.mask').css({
            left: x + 'px',
            top: y + 'px'
        })

        let s = x * $('.wraper-r').innerWidth() / $('.mask').innerWidth()
        let g = y * $('.wraper-r').innerHeight() / ($('.mask').innerHeight())
        $('.o').css({
            left: -s + 'px',
            top: -g + 'px'
        })




    })

    $('#glass').on('mouseout', '.a', function (e) {
        $('.mask').css({
            display: 'none'
        })
        $('.wraper-r').css({
            display: 'none'
        })
    })


}
//点击事件


$('#glass').on('click', '.ulEle>li', function () {
    //删除所有样式
    $('.ulEle>li').removeClass('active')
    //给点击当前元素设置样式
    $(this).addClass('active')

    console.log('11111', $(this).attr("active"));
  
        let img = $(this).children().first().prop('src')
        console.log('$(this).first() >>> ',$(this).children().first());
        
        $('.left-img').prop('src', `${img}`)
        $('.right-img').prop('src', `${img}`)

   


})
//返回首页
function returns(){
    location.href='../pages/index.html'
}

//删除所有样式
// 点击添加购物车
let productList = localStorage.getItem('USER')
let user = JSON.parse(productList)

function shopping() {

    if (user) {
        onSum()
        location.href = '../pages/shopping.html'
    } else {
        alert('你还没登录哦')
    }

}
//点击查看购物车
function showping() {

    if (user) {
        location.href = '../pages/shopping.html'
    } else {
        alert('你还没登录哦')
    }

}
loadProuctDetail()
Glass()